/**
 *@auther: tang
 *@Date: 2020-11-16
 *Project: group-booking-shop-manage-system
 */
import React from "react"
import {Table, Button, Modal, Tooltip, message} from 'antd';
import * as Icon from "@ant-design/icons"
import { Observer,inject} from "mobx-react"
import Req from "../../../api"
const { Column} = Table;

@inject("userStore","permissStore")
@Observer
class MenuSettings extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataIsLoading:true,
            tableData:[],
            modalVisable:false,
            confirmLoading:false
        }

    }
    componentWillMount() {
        this.getTableData()
    }
    getTableData(){
        //    这里请求
        Req.menuManagerList({}).then(res=>{
            console.log(res);
            this.setState({
                dataIsLoading:false,
                confirmLoading:false,
                modalVisable:true,
                tableData:res
            })
        }).catch(err=>{
            console.log(err)
        })
    }
    addItem(){
        //    添加一个条目
    }
    onPageChange(page,limit){
        //    分页按钮点击
    }
    handleModalOk(){
        //    处理点击模态框确定
        this.setState({
            confirmLoading:true
        },()=>{
            //    发送axios请求
            Req.menuManagerList({}).then(res=>{
                console.log(res);
                this.setState({
                    confirmLoading:false,
                    modalVisable:true
                });
                message.success("添加成功");
                this.getTableData();
            }).catch(err=>{
                console.log(err);
                message.error("服务器开小差了")
            })
        })


    }
    openModal(index){
        console.log(index)
        this.setState({
            modalVisable:true
        })
    }
    modalHandleCancel(){
        this.setState({
            modalVisable:false,
            confirmLoading:false
        })
    }
    //点击不同的按钮触发不同的模态框
    render() {
        let {state} = this;
        // console.log(this.props.tableData)
        return (
            <div>
                {/*顶部操作区域*/}
                <Button onClick={this.addItem.bind(this)}>添加</Button>
                <Table dataSource={this.state.tableData} loading={{
                    tip:"数据请求中",
                    spinning:state.dataIsLoading
                }} sticky={true} pagination={{
                    defaultCurrent:1,total:state.tableData.length,onChange:this.onPageChange.bind(this)
                }}  rowKey={record=>record.id}>
                    <Column title="ID" dataIndex="id" key="id" />
                    <Column title="名称" dataIndex="name" key="id" />
                    <Column title="图标" dataIndex="ico" key="id" />
                    <Column title="链接" dataIndex="link" key="id" />
                    <Column title="排序" dataIndex="sort" key="id" />
                    <Column title="启用" dataIndex="state" key="id" />
                    <Column title="操作"  key="id" render ={ (text,record,index)=>{
                        return <div className="tableAction">
                            <Tooltip title="分配权限">
                                <Button shape="circle" icon={<Icon.SwitcherTwoTone />} onClick={this.openModal.bind(this,1)}/>
                            </Tooltip>
                        </div>
                    }}/>
                </Table>
                <Modal
                    title="Title"
                    visible={state.modalVisible}
                    onOk={this.handleModalOk}
                    confirmLoading={state.confirmLoading}
                    onCancel={this.modalHandleCancel}

                >
                </Modal>
            </div>

        )
    }
}

export {MenuSettings as default}
